<template>
  <div class="container">
    <div class="activity">
      <!-- 动态绑定图片地址 -->
      <img
        style="width: 100%; height: 200px; border-radius: 12px"
        src="@/assets/images/title.jpg"
        alt=""
      />
    </div>
    <div class="tabs-content">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="0" tab="招聘动态" disabled></a-tab-pane>
        <a-tab-pane key="1" tab="全部">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="互联网">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="电子商务">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="4" tab="科技">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="5" tab="手机">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="6" tab="教育">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="7" tab="娱乐">
          <a-row :gutter="14">
            <a-col v-for="(item, index) in homeStore.companyList" :key="index" :span="4">
              <a-card
                hoverable
                class="card-item"
                :bordered="false"
                @click="handleCompanyPosition(item)"
              >
                <template #cover>
                  <!-- 动态绑定图片地址 -->
                  <img
                    alt="example"
                    style="width: 100%; height: 200px"
                    :src="getImageUrl(item.imageUrl)"
                  />
                </template>
                <a-card-meta :title="item.companyName">
                  <template #description>
                    <div>Base地：{{ item.location }}</div>
                    <div>描述：{{ item.description }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="position-content">
      <div style="font-size: 22px; font-weight: 600; color: #000">在招职位</div>
      <a-divider />
      <a-row :gutter="14">
        <a-col v-for="(item, index) in homeStore.positionByCompanyList" :key="index" :span="4">
          <a-card hoverable class="card-item" :bordered="false" @click="handlePositionDetail(item)">
            <template #extra><a-button type="link">查看</a-button></template>
            <template #title>
              <a-avatar style="display: inline-block">
                <template #icon>
                  <!-- 动态绑定图片地址 -->
                  <img :src="getImageUrl(item.imageUrl)" />
                </template>
              </a-avatar>
              <span style="display: inline-block; margin-left: 8px">
                {{ item.companyName }}
              </span>
            </template>
            <div>
              <div style="display: flex; justify-content: space-between">
                <span>{{ item.title }}-{{ item.location }}</span>
                <span>{{ item.salary }}</span>
              </div>
              <div>
                <div>{{ item.location }} &nbsp|&nbsp {{ item.bg }}</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import server from '@/api/index'
import { message } from 'ant-design-vue'
import { useHomeStore } from '@/stores/homeStore'
import { usePositionListStore } from '@/stores/positionListStore'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { home } from '@/api/homeApi'

const router = useRouter()
const homeStore = useHomeStore()
const positionListStore = usePositionListStore()
const activeKey = ref('1')

const getImageUrl = imageUrl => {
  try {
    return new URL(imageUrl, import.meta.url).href
  } catch (error) {
    // 如果图片路径不正确，返回默认图片
    return new URL('@/assets/images/title.jpg', import.meta.url).href
  }
}

const handleCompanyPosition = async item => {
  try {
    positionListStore.flag = true
    const res = await server.getCompanyPositionList(item.companyId)
    if (res?.data.code === 0) {
      positionListStore.positionList = res.data.data.map(position => {
        switch (position.status) {
          case 0:
            position.status = '已创建'
            break
          case 1:
            position.status = '已发布'
            break
          case 2:
            position.status = '已暂停'
            break
          case 3:
            position.status = '已关闭'
            break
          case 5:
            position.status = '已招满'
            break
        }
        return {
          ...position,
          startDate: dayjs(position.startDate).format('YYYY/MM/DD'),
          endDate: dayjs(position.endDate).format('YYYY/MM/DD'),
          companyId: item.companyId,
          companyName: item.companyName,
          // 假设接口返回的图片地址
          imageUrl: position.imageUrl || '@/assets/images/title.jpg',
        }
      })
      positionListStore.total = positionListStore.positionList.length
    } else {
      message.error(res.data.message)
    }
    router.push('/positionList')
  } catch (error) {
    message.error(error)
  }
}

const getCompanyList = async tag => {
  try {
    const res = await server.getCompanyList({
      current: homeStore.page,
      pageSize: homeStore.pageSize,
      tag,
    })
    if (res?.data.code === 0) {
      homeStore.companyList = res.data.data.records
      homeStore.companyList.forEach(item => {
        item.imageUrl = '../../../assets/images/' + item.companyId + '.png'
      })
      homeStore.total = res.data.data.total
    } else {
      message.error(res.data.message)
    }
  } catch (error) {
    message.error(error)
  }
}

const handlePositionDetail = async item => {
  try {
    positionListStore.flag = true
    const res = await server.getPositionById(item.id)
    console.log(res.data.data)
    if (res?.data.code === 0) {
      positionListStore.positionList = [
        {
          ...res.data.data,
          startDate: dayjs(res.data.data.startDate).format('YYYY/MM/DD'),
          endDate: dayjs(res.data.data.endDate).format('YYYY/MM/DD'),
          companyId: item.companyId,
          companyName: item.companyName,
        },
      ]
      switch (res.data.data.status) {
        case 0:
          res.data.data.status = '已创建'
          break
        case 1:
          res.data.data.status = '已发布'
          break
        case 2:
          res.data.data.status = '已暂停'
          break
        case 3:
          res.data.data.status = '已关闭'
          break
        case 5:
          res.data.data.status = '已招满'
          break
      }
      positionListStore.total = positionListStore.positionList.length
    } else {
      message.error(res.data.message)
    }
    router.push('/positionList')
  } catch (error) {
    message.error(error)
  }
}
watch(
  () => activeKey.value,
  val => {
    switch (val) {
      case '1':
        getCompanyList()
        break
      case '2':
        getCompanyList('AI')
        break
      case '3':
        getCompanyList('E-Commerce')
        break
      case '4':
        getCompanyList('Technology')
        break
      case '5':
        getCompanyList('Smartphone')
        break
      case '6':
        getCompanyList('Education')
        break
      case '7':
        getCompanyList('Entertainment')
        break
    }
  },
)
</script>

<style lang="scss" scoped>
.container {
  overflow-y: auto;
  width: 100%;
  max-height: 100%;
  background-color: #fff;

  .activity {
    padding: 15px;
    padding-bottom: 0;
  }

  .tabs-content {
    padding: 15px;
  }

  .position-content {
    padding: 15px;
    padding-top: 0;
  }

  .card-item {
    margin: 8px;
    cursor: pointer;
    background-color: #f8f8f8;
  }

  .ant-row {
    margin: 0;
  }

  :deep(.ant-tabs-tab-disabled) {
    font-size: 22px;
    font-weight: bold;
    color: #000;
    cursor: default;
  }
}
</style>
